<template>
  <div>
    <a-row :gutter="24" justify="left" align="middle" style="margin: 0px; padding: 20px; border: 0px solid black;">
        <a-col :span="1" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <span class="lbl_span">期间</span>
          </div>
        </a-col>
        <a-col :span="4" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <!-- <span class="lbl_span">期间</span> -->
            <a-range-picker class="col_content" />
          </div>
        </a-col>
        <a-col :span="1" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <span class="lbl_span">分类</span>
          </div>
        </a-col>
        <a-col :span="4" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <!-- <span class="lbl_span">分类</span> -->
            <a-select show-search placeholder="请选择分类" class="col_content"></a-select>
          </div>
        </a-col>
        <a-col :span="1" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <span class="lbl_span">系统</span>
          </div>
        </a-col>
        <a-col :span="4" style="border: 0px solid black; padding: 0px;">
          <div class="row_div">
            <!-- <span class="lbl_span">系统</span> -->
            <a-select show-search placeholder="请选择系统" class="col_content"></a-select>
          </div>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="7" style="padding-left: 0px; border: 0px solid black; flex: 0;">
          <div class="row_div">
            <a-button class="btn_group" type="primary">
              <template #icon><SearchOutlined /></template>查询</a-button>
            <a-button class="btn_group" danger>
              <template #icon><ClearOutlined /></template>重置</a-button>
            <a-button class="btn_group">
              <template #icon><PlusOutlined /></template>新建</a-button>
          </div>
        </a-col>
      </a-row>
      <div style="height: 15px;"></div>
      <div style="width: 100%; height: 100%;">
        <a-table :data-source="datasources" :columns="columns" bordered :scroll="{ x: 'auto' }" :pagination="true">
          <template #bodyCell="{column, text, record}">
            <template v-if="column.dataIndex==='action'">
              <span>修改</span>
            </template>
          </template>
        </a-table>
      </div>
  </div>
</template>
<script>
import { SearchOutlined, ClearOutlined, PlusOutlined } from '@ant-design/icons-vue';
export default {
  components: {
    SearchOutlined,
    ClearOutlined,
    PlusOutlined
  },
  data() {
    return {
      datasources: [
        {
          id: 1,
          sbTime: '2024-04-10',
          sbPerson: '测试人',
          sbClass: '请求传输',
          questionDes: "测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述",
          answer: '已处理',
          procPreson: '处理人',
          isOk: '按时',
          procTime: '4',
          sbDept: '测试部门',
          sbSystem: '测试系统',
          flowNo: 'SDK1234122'
        },
        {
          id: 2,
          sbTime: '2024-04-10',
          sbPerson: '测试人',
          sbClass: '请求传输',
          questionDes: "测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述",
          answer: '已处理',
          procPreson: '处理人',
          isOk: '按时',
          procTime: '4',
          sbDept: '测试部门',
          sbSystem: '测试系统',
          flowNo: 'SDK1234122'
        },
        {
          id: 3,
          sbTime: '2024-04-10',
          sbPerson: '测试人',
          sbClass: '请求传输',
          questionDes: "测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述-测试问题描述",
          answer: '已处理',
          procPreson: '处理人',
          isOk: '按时',
          procTime: '4',
          sbDept: '测试部门',
          sbSystem: '测试系统',
          flowNo: 'SDK1234122'
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          width: '8%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          defaultSortOrder: 'ascend'
        },
        {
          title: '提报时间',
          dataIndex: 'sbTime',
          key: 'sbTime',
          width: '8%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '需求提报人',
          dataIndex: 'sbPerson',
          key: 'sbPerson',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '分类',
          dataIndex: 'sbClass',
          key: 'sbClass',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '问题描述',
          dataIndex: 'questionDes',
          key: 'questionDes',
          width: '15%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '处理记录',
          dataIndex: 'answer',
          key: 'answer',
          width: '15%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '处理人',
          dataIndex: 'procPreson',
          key: 'procPreson',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '是否完成',
          dataIndex: 'isOk',
          key: 'isOk',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '处理时长(分)',
          dataIndex: 'procTime',
          key: 'procTime',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '问题提出部门',
          dataIndex: 'sbDept',
          key: 'sbDept',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '运维系统',
          dataIndex: 'sbSystem',
          key: 'sbSystem',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '流程编号',
          dataIndex: 'flowNo',
          key: 'flowNo',
          width: '10%',
          // render: (text, record, index) => {
          //   return index + 1;
          // },
          // sorter: (a, b) => a.id - b.id,
          // sortDirections: ['descend', 'ascend'],
          ellipsis: true,
          align: 'center',
          fixed: 'left',
          // defaultSortOrder: 'ascend'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '300',
          fixed: 'right'
        }
      ]
    };
  },
};
</script>
<style scoped>
.row_div {
  width: 100%;
  display: flex; 
  align-items: center;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
}
.col_content {
  width: 80vw;
  min-width: 10vw;
}
.btn_group {
  display: flex;
  margin: 0 10px;
}
.lbl_span {
  width: 20vw; 
  min-width: 5vw;
}
.anticon-search, .anticon-clear, .anticon-plus {
  margin-right: -5px;
  margin-top: 5px;
}
</style>
  